<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>11</title>
    <script src="./vue.global.js"></script>
</head>
<style>
    .red {
        color:red;
    }
    .green {
        color:green;
    }
    .orange {
        color:orange;
    }
</style>
<body>
<div id="vueApp"></div>
<script>
    window.app = Vue.createApp({
        data() {
            return { age: -10};
        },
        methods: {
            clickHandle() {
                this.age *= -1;
            }
        },
        template: `
          <div v-bind:age='age' v-bind:class="age<11?'red':'green'" @click="clickHandle">
          <i>技术胖&nbsp;</i>age:{{ age }}
          </div>
          <div v-if="age<0" class="orange" @click="clickHandle">
          <i>技术瘦&nbsp;</i>age:{{ age }}
          </div>
        `
    });
    window.vm = app.mount("#vueApp");
</script>
</body>
</html>